<template>
    <div>
        <div v-for="(item, i) in props.songsList" :key="item.id">
            <div class="songItem">
                <div class="itemLeft" @click="playMusic(i)">
                    <span class="count">{{ i + 1 }}</span>
                    <div>
                        <div class="name">
                            {{ item.name }}
                        </div>
                        <div class="auths">
                            <span class="auth" v-for="au in item.artists" :key="au.id">
                                {{ au.name }}
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    <van-icon v-if="item.mvid" name="tv-o" size="0.5rem" @click="showVideoDetail(item.mvid)" />
                    <van-icon :style="{ marginLeft: '0.1rem' }" name="wap-nav" size="0.5rem" />
                </div>
            </div>
        </div>
    </div>
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>import { getMusicDetail } from '@/request/api/musicListDetail';
import store from '@/store';
import { showNotify } from 'vant';

const props = defineProps(['songsList'])
const playMusic = async (index: number) => {
    if (store.state.playList[0].id) {
        let targetIndex = store.state.playList.findIndex(item => +item.id === +props.songsList[index].id)
        if (targetIndex !== -1) {
            store.commit('updatePlayListIndex', targetIndex)
            return
        }
    }
    let res = await getMusicDetail(+props.songsList[index].id)
    if (res.data.code === 200 && store.state.playList[0].id) {
        let newPlayList = JSON.parse(JSON.stringify(store.state.playList)).concat(res.data.songs)
        store.commit('updatePlayList', newPlayList)
        store.commit('updatePlayListIndex', newPlayList.length - 1)
    } else if (res.data.code === 200) {
        store.commit('updatePlayList', res.data.songs)
        store.commit('updatePlayListIndex', 0)
    }
    else {
        showNotify({ type: 'danger', message: '获取歌曲失败' });
    }
}
const showVideoDetail = async (id: number) => {
    store.commit('updateVideoDetailShow')
    let res = await store.dispatch('getVideoUrl', id)
    if (res.data.code === 200 && res.data.data.code === 200) {
        store.commit('updateVideoUrl', res.data.data.url)
    } else {
        showNotify({ type: 'danger', message: '获取视频失败' });
    }
}
</script>
 
<style lang = "less" scoped>
.songItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.3rem 0.2rem 0 0.2rem;

    .itemLeft {
        width: 80%;
        display: flex;
        align-items: center;

        .count {
            min-width: 0.4rem;
            margin: 0.1rem;
            font-size: 0.34rem;
            color: #999;
        }

        .name {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .auths {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            font-size: 0.2rem;
            color: #999;

            .auth {
                margin-right: 0.2rem;

            }
        }

    }
}
</style>